// Go圈 动态
import { FlatList, SafeAreaView, StyleSheet, Text, TouchableHighlight, View, Image, Modal } from 'react-native'
import { dynamicStateDate } from './dataGoCircle'
import IconA from 'react-native-vector-icons/FontAwesome5'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import Icon from 'react-native-vector-icons/FontAwesome'
import EntypoIcon from 'react-native-vector-icons/Entypo'
import React, { useRef, useState } from 'react'
import { Navigation } from 'react-native-navigation'
import ImageViewer from 'react-native-image-zoom-viewer';

import Storage from '../constants/storage'

// DynamicStateHeader 头部子组件
const DynamicStateHeader = () => {
  return (
    <View style={styles.DynamicStateHeader}>
      <TouchableHighlight style={{ marginBottom: 20 }} activeOpacity={0.5} underlayColor='#00000060' onPress={() => { console.log(1) }}>
        <View style={styles.iconText1}>
          <IconA name='grimace' color='#8ca5d8' size={40} />
          <Text style={styles.text}>全部数据</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight style={{ marginBottom: 20 }} activeOpacity={0.5} underlayColor='#00000060' onPress={() => { console.log(2) }}>
        <View style={styles.iconText1}>
          <IconA name='grin-hearts' color='#8c86d5' size={40} />
          <Text style={styles.text}>热议话题</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight style={{ marginBottom: 20 }} activeOpacity={0.5} underlayColor='#00000060' onPress={() => { console.log(3) }}>
        <View style={styles.iconText1}>
          <IconA name='grimace' color='#eac980' size={40} />
          <Text style={styles.text}>百科知识</Text>
        </View>
      </TouchableHighlight>
    </View>
  )
}

// DynamicStateFooter 底部子组件
const DynamicStateFooter = () => {
  const [footBool, setFootBool] = useState(true)
  return (
    <View>
      {footBool
        ? <View style={styles.loads}>
          <MaterialIcons name='timer' size={30} />
        </View>
        : <Text>loading</Text>}
    </View>
  )
}

const DynamicState = (props) => {
  const { componentId } = props
  const flatref = useRef()
  const [list, setList] = useState(dynamicStateDate)
  const [zan, setZan] = useState(false) // 点赞的状态
  const [num, setNum] = useState(0)
  const [visible, setVisible] = useState(false) // 控制Modal的显示隐藏
  const [images, setImages] = useState([]) // 预览图片的数据
  const [index, setIndex] = useState(0) // 要预览的图片下标

  // 存储数据
  Storage.save({
    key: 'dynamicStateDate',
    data: dynamicStateDate
  })
  // 列表内容
  const renderItem = ({ item }) => {
    // 跳转到文章详情
    const allData = (id) => {
      // console.log(componentId,id);
      Navigation.push(componentId, {
        component: {
          name: 'DongTaiDetail',
          passProps: {
            Id: item.id
          }
        }
      })
    }
    // 点击图片进行预览
    const previews = (i, index) => {
      setImages(i) // 将要预览的图片出给组件
      setVisible(true) // 打开预览的Modal
      setIndex(index)
    }
    // 监听系统返回键关闭预览的Modal
    const onRequestClose = () => {
      setVisible(false)
    }
    // 保存图片
    const savePhoto = (index, url) => {
      console.log(index, url);
      alert('暂未添加图片保存功能')
    }
    return (
      <View style={styles.itemContainer}>
        {/* 图片预览模块 */}
        <Modal visible={visible} transparent={true} onRequestClose={onRequestClose}>
          <ImageViewer
            imageUrls={images} // 预览图片的数组
            index={index} // 当前预览的图片下标
            onClick={() => { console.log('onClick') }} // 图片的点击事件
            saveToLocalByLongPress={true} //是否开启长按保存
            menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }} // 长按弹出的提示语
            onChange={() => { console.log('图片切换了') }}
            // onSaveToCamera={(index) => { console.log('onSaveToCamera:', index) }}
          // onSave={() => { savePhoto(index, images[index].props.source) }}
          />
        </Modal>
        {/* 顶部内容 */}
        <View style={styles.headerItem}>
          <View style={styles.imgText}>
            <Image source={item.uPhoto} style={styles.uPhoto} />
            <View >
              <Text style={styles.headerName}>{item.nickName}</Text>
              <Text style={styles.headerText}>{`${item.guanzhuCount}人关注`}</Text>
            </View>
          </View>
          <TouchableHighlight activeOpacity={0.5} underlayColor='#aaa' style={styles.touchG} onPress={() => { allData(item.id) }}>
            <Text style={styles.touchT}>关注</Text>
          </TouchableHighlight>
        </View>
        {/* 文章内容 */}
        <View>
          <Text style={styles.dtCountent} numberOfLines={2} ellipsizeMode='tail'>{item.dtCountent}</Text>
        </View>
        {/* 文章图片 */}
        <View style={styles.ContainerContentImg}>
          {
            item.contentImg.map((item2, index) => {
              return (
                <TouchableHighlight key={item2.cimgId} onPress={() => { previews(item.contentImg, index) }} >
                  <Image source={item2.props.source} style={styles.contentImg} />
                </TouchableHighlight>

              )
            })
          }
        </View>
        {/* 点赞区域 */}
        <View style={styles.iconCount}>
          <View style={styles.zanCount}>
            <View style={styles.iconText}>
              <Icon style={zan && num == item.id ? [styles.iconZan, { color: '#2a7cff' }] : styles.iconZan} name='thumbs-o-up' size={20} onPress={() => {
                setNum(item.id)
                setZan(!zan)
              }} />
              <Text style={zan && num == item.id ? [styles.textZan, { color: '#2a7cff' }] : styles.textZan}>{item.zanCount}</Text>
            </View>
            <View style={styles.iconText}>
              <Icon style={styles.iconZan} name='commenting-o' size={20} />
              <Text style={styles.textZan}>{item.msgCount}</Text>
            </View>
          </View>
          <EntypoIcon name='dots-three-horizontal' size={20} />
        </View>
      </View>
    )
  }
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ref={flatref} // 当前组件的ref
        data={list}
        renderItem={renderItem}
        keyExtractor={item => {
          return item.id
        }}
        ListHeaderComponent={<DynamicStateHeader />}
        ListFooterComponent={<DynamicStateFooter />}
        refreshing={false}
        onRefresh={() => {
          console.log('下拉刷新');
          flatref.current.scrollToIndex({ // 设置滚动条滚动到容器的什么位置
            animation: true,
            index: 0 // 滚动到容器的一个高度的比值
          })
        }}
        onEndReachedThreshold={0.01}
        onEndReached={() => {
          console.log('触底刷新');
          // flatref.current.scrollToIndex({ // 设置滚动条滚动到容器的什么位置
          //   // animation: true,
          //   // index: 1 // 滚动到容器的一个高度的比值
          // })
        }}
      />
    </SafeAreaView>
  )
}

export default DynamicState

const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: '#00bcff',
    paddingBottom: 140,
  },
  // DynamicStateHeader 子组件
  DynamicStateHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#eee',
    paddingRight: 20,
    paddingLeft: 20,
    paddingTop: 20,
  },
  iconText1: {
    alignItems: 'center'
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
    marginTop: 10,
  },
  // DynamicStateHeader 头部子组件
  loads: {
    alignItems: 'center',
    margin: 10
  },
  // 列表内容
  itemContainer: {
    paddingRight: 20,
    paddingLeft: 20,
    marginBottom: 10, backgroundColor: '#fff'
  },
  headerItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 10,
    marginBottom: 10
  },
  imgText: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  uPhoto: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 10
  },
  headerName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000'
  },
  headerText: {
    fontSize: 14,
    color: '#999'
  },
  touchG: {
    width: 60,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#51ec7b',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  touchT: {
    color: '#fff',
    fontWeight: '600'
  },
  dtCountent: {
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 30,
    color: '#000'
  },
  ContainerContentImg: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  contentImg: {
    width: 100,
    height: 100,
    margin: 5
  },
  iconCount: {
    display: 'flex',
    flexDirection: 'row',
    // backgroundColor: '#eee',
    justifyContent: 'space-between',
    alignItems: 'center',
    // borderBottomWidth: 2,
    borderBottomColor: '#eee'
  },
  zanCount: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: 20,
    marginBottom: 20
  },
  iconText: {
    display: 'flex',
    flexDirection: 'row',
    marginRight: 20
  },
  iconZan: {
    marginRight: 10
  },



})